<template>
  <div class="bg">
    <div class="title">房间设置</div>
    <div class="form">
      <div class="form-item">
        <div class="form-item-label">房间类型</div>
        <div class="form-item-value">
          <el-select v-model="settingForm.type" style="width: 400px; border-radius: 4px">
            <el-option
              v-for="item in anchorType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">房间名称</div>
        <div class="form-item-value">
          <el-input
            v-model="settingForm.a"
            placeholder="请输入内容"
            style="width: 400px; border-radius: 4px"
          />
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">房间个签</div>
        <div class="form-item-value">
          <el-input
            v-model="settingForm.b"
            placeholder="请输入内容"
            style="width: 400px; border-radius: 4px"
          />
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">房间公告</div>
        <el-input
          v-model="announcement"
          style="width: 936px"
          :rows="2"
          type="textarea"
          placeholder="请输入文字"
        />
        <!-- <WangEditor style="width: 70%" /> -->
      </div>
      <div class="form-item">
        <div class="form-item-label">房间背景</div>
        <div class="background-box">
          <div v-for="i in backImgList" :key="i.id" class="background">
            <el-image style="width: 100%; height: 100%" :src="pic" fit="cover" />
            <div class="selector" @click="selected = i.id">
              <div class="selected">
                <img v-if="selected === i.id" src="@/assets/live/selected_green_circle.svg" />
              </div>
              <div style="height: 22px; width: 100%; text-align: center">
                {{ currentUse === i.id ? "当前使用" : "" }}
              </div>
              <span>背景名称</span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="microOptions.length !== 0" class="form-item">
        <div class="form-item-label">麦位数量</div>
        <div class="form-item-value">
          <el-radio-group v-model="settingForm.c">
            <el-radio v-for="item in microOptions" :label="item">{{ item }}</el-radio>
          </el-radio-group>
          <div style="font-size: 12px; color: #919aa5">注：麦位数量不包含房主</div>
        </div>
      </div>

      <div class="form-item">
        <div class="form-item-label">录屏设置</div>
        <div class="form-item-value">
          <el-switch v-model="settingForm.d" active-text="开启" inactive-text="关闭" />
        </div>
      </div>
      <div v-if="![7, 8].includes(settingForm.type)" class="form-item">
        <div class="form-item-label">上麦是否需要申请</div>
        <div class="form-item-value">
          <el-switch v-model="settingForm.d" active-text="开启" inactive-text="关闭" />
        </div>
      </div>
      <div v-if="settingForm.type === 6" class="form-item">
        <div class="form-item-label">深夜剧场竞价截止时间</div>
        <div class="form-item-value">
          <el-date-picker v-model="settingForm.time" type="datetime" />
        </div>
      </div>
      <div v-if="settingForm.type === 6" class="form-item">
        <div class="form-item-label">深夜剧场持续时间</div>
        <div class="form-item-value">
          <el-date-picker v-model="settingForm.time" type="datetime" />
        </div>
      </div>
      <div v-if="settingForm.type === 6" class="form-item">
        <div class="form-item-label">深夜剧场竞价</div>
        <div class="form-item-value">
          <span style="font-size: 14px; color: #4e5969" class="m-r-4">起拍价</span>
          <el-input v-model="settingForm.a" placeholder="红欲米" style="width: 15%" />
          <span style="font-size: 12px; color: #919aa5" class="m-r-4 m-l-2">起拍价需≥xx</span>

          <span style="font-size: 14px; color: #4e5969" class="m-r-4">单次加价</span>
          <el-input v-model="settingForm.a" placeholder="红欲米" style="width: 15%" />
          <span style="font-size: 12px; color: #919aa5" class="m-r-4 m-l-2">单次加价需≥xx</span>
        </div>
      </div>
      <div v-if="[4, 6, 7].includes(settingForm.type)" class="form-item">
        <div class="form-item-label">是否开启点歌功能</div>
        <div class="form-item-value">
          <el-switch v-model="settingForm.d" active-text="开启" inactive-text="关闭" />
        </div>
      </div>
      <div v-if="settingForm.type !== 8" class="form-item">
        <div class="form-item-label">设备检测</div>
        <div class="form-item-value">
          <el-button type="primary" @click="deviceCheckRef.show()">开始检测</el-button>
          <div style="font-size: 12px; color: #919aa5">
            注：为保证直播顺利进行，推荐您开播前进行设备检测
          </div>
        </div>
      </div>
      <DeviceCheck ref="deviceCheckRef" />
      <div v-if="settingForm.type === 8" class="form-item">
        <div class="form-item-label">选择婚礼</div>
        <div class="form-item-value">
          <el-select v-model="settingForm.type">
            <el-option
              v-for="item in anchorType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="form-footer">
        <el-button type="primary" class="found-btn" @click="waitLiving">创建直播</el-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "LiveSetting",
};
</script>
<script lang="ts" setup>
import pic from "@/assets/images/login-bg-dark.jpg";
import DeviceCheck from "./DeviceCheck.vue";
import { ref } from "vue";
// import { useRouter } from "vue-router";

const deviceCheckRef = ref();
// 选中的背景图
const selected = ref(1);

const backImgList = ref([
  {
    id: 1,
    img: "",
  },
  {
    id: 2,
    img: "",
  },
  {
    id: 3,
    img: "",
  },
  {
    id: 4,
    img: "",
  },
]);

const currentUse = ref(1);
const settingForm = ref({
  type: 6, // 房间类型
  time: new Date(), // 哄睡剧场-深夜剧场持续时间
  a: "",
  b: "",
  c: "",
  d: "",
});
// 房间类型
const anchorType = [
  {
    label: "交友相亲",
    value: 1,
  },
  {
    label: "情感互动",
    value: 2,
  },
  {
    label: "悦耳声优",
    value: 3,
  },
  {
    label: "搞笑娱乐",
    value: 4,
  },
  {
    label: "游戏陪玩",
    value: 5,
  },
  {
    label: "哄睡剧场",
    value: 6,
  },
  {
    label: "官方直播间",
    value: 7,
  },
  {
    label: "官方婚礼",
    value: 8,
  },
];
//房间公告
const announcement = ref("");
// 麦位数量
const microOptions = computed(() => {
  if (settingForm.value.type === 2) {
    return [8, 12];
  } else if ([3, 6].includes(settingForm.value.type)) {
    return [0, 4, 8, 12];
  } else {
    return [];
  }
});
const emit = defineEmits(["toLive"]);
//点击创建直播间后跳转
const waitLiving = () => {
  emit("toLive");
};
</script>
<style lang="scss" scoped>
.bg {
  width: 100%;
  // height: 100vh;
  padding: 3%;
  background: linear-gradient(180deg, #f0f5ff 0%, #fbfcfe 100%);
  box-shadow:
    inset 2px 1px 2px 1px #ffffff,
    0px 4px 8px 0px #eaf0ff;
  border-radius: 30px;
  .title {
    color: #1d2129;
    font-size: 16px;
    padding-bottom: 24px;
  }
  .form {
    padding-left: 3%;
    &-item {
      display: flex;
      align-items: flex-start;
      margin-top: 24px;
      &-label {
        min-width: 15%;
        margin-right: 16px;
        color: #4e5969;
        font-size: 14px;
        text-align: right;
        height: 32px;
        line-height: 32px;
      }
      .background-box {
        width: 30%;
        display: flex;
        gap: 10px;
        .background {
          width: 72px;
          height: 120px;
          border-radius: 4px;
          overflow: hidden;
          position: relative;
          color: #fff;

          .selector {
            width: 100%;
            height: 100%;
            background-color: transparent;
            top: 0;
            position: absolute;
            font-size: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            padding-bottom: 4px;
            .selected {
              width: 24px;
              height: 24px;
              border-radius: 50%;
              margin: 30px 0 10px;
            }
          }
        }
      }
      &-value {
        width: 50%;
      }
    }
    &-footer {
      width: 80%;
      text-align: right;
      padding-top: 100px;
    }
  }
}
//文本域高度
:deep(.el-textarea__inner) {
  min-height: 80px !important;
  height: 225px !important;
  border-radius: 4px;
}
</style>
